<template>
	<section class="tag">
		<div class="title">
			<el-icon><Document /></el-icon>
			<h4>分类</h4>
			({{ typeClass.total.value }})
		</div>
		<div class="content">
			<span v-for="item in typeClass.list.value" :key="item.id">
				{{ item.tagName }}
			</span>
		</div>
	</section>
</template>
<script lang="ts" setup>
import { Document } from '@element-plus/icons-vue'
import { TypeClass } from './controller'
let typeClass = new TypeClass()
</script>
<style scoped>
.tag {
	.title {
		display: flex;
		align-items: center;
		.el-icon {
			margin-right: 10px;
			color: #567af6;
		}
		h4 {
			margin-right: 10px;
		}
	}
	.content {
		display: flex;
		flex-wrap: wrap;
		span {
			padding: 5px 10px;
			margin-right: 10px;
			margin-bottom: 10px;
			font-size: 12px;
			border: 1px solid #cccccc;
			border-radius: 5px;
		}
	}
}
</style>
